<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的设备</title>
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/common.css">
    <link rel="stylesheet" href="/layui/extend/dtree.css">
    <link rel="stylesheet" href="/layui/extend/font/dtreefont.css">

</head>

<body>

<div class="yadmin-body animated fadeIn">
    <input type='text' id="handle_status" value="" hidden="hidden">
    <form class="layui-form yadmin-search-area input">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label for="equipmentName" class="layui-form-label">设备名</label>
                <div class="layui-input-inline">
                    <input type="text" name="equipmentName" autocomplete="off"
                           id="equipmentName" class="layui-input">
                </div>

                <label for="sex" class="layui-form-label">类别</label>
                <div class="layui-input-inline">
                    <select name="sex" id="sex">
                        <option value="">请选择</option>
                        <option value="1">棋牌</option>
                        <option value="0">电子</option>
                    </select>
                </div>

                <button lay-submit="" lay-filter="search" class="layui-btn">
                    <i class="layui-icon layui-icon-search"></i>
                </button>
            </div>
        </div>
    </form>

    <table class="layui-hide" id="my-equipment-table"></table>
</div>

<script type="text/html" id="toolbar">

</script>

<script type="text/html" id="column-toolbar">
    <input type="hidden" id="userId" th:value="${user.id}">
    <button type="button" class="layui-btn layui-btn-normal layui-btn-xs" lay-event="purchase">
        <i class="layui-icon layui-icon-edit" title="下单"></i>
        归还
    </button>
</script>


<script src="/js/jquery.js"></script>
<script src="/layui/layui.js"></script>
<script src="/js/common.js"></script>

<script>
    layui.config({
        base: '/layui/extend/'
    }).use(['table', 'element', 'form'], function () {
        var table = layui.table;
        var $ = layui.$;
        var form = layui.form;


        table.render({
            elem: '#visitor-equipment-table',
            url: '/equipment/findMyEquipment',
            page: true,
            toolbar: '#toolbar',
            smartReloadModel: true,
            cols: [
                [
                    {type: 'checkbox'},
                    {field: 'id', title: 'ID', hide: true},
                    {field: 'name', title: '设备名', minWidth: 160},
                    {field: 'sex', title: '类别', minWidth: 160,
                        templet: function (d) {
                            if (d.sex == 1) {return '棋牌'}  else {return '电子'}
                        }
                    },
                    {field: 'comment', title: '简介', minWidth: 160},
                    {title: '操作', fixed: 'right', align: 'center', toolbar: '#column-toolbar'}
                ]
            ], id: "my-equipment-table",
            done : function(res, curr, count){
            if (res.count === 0) {
                $(".layui-table-main").html('<div class="layui-none">您还未租赁设备</div>');
                }
            }
        });

        // 账号状态(正常/锁定)点击事件
        form.on('switch(status)', function (data) {
            if (data.elem.checked) {
                parent.layer.msg("激活成功", {icon: 6});
            } else {
                parent.layer.msg("禁用成功", {icon: 6});

            }
        });


        // 行点击事件 重置密码
        table.on('tool', function (obj) {
            var data = obj.data;
            var event = obj.event;
            console.log(data);
            var nums = data.number;
            var equipmentName=data.name;
            var userId =[[${user.id}]];
            var equipmentId=data.id;
            window.equipmentName=equipmentName;
            window.userId=userId;
            window.equipmentId=equipmentId;
            window.message = "您取消了操作";
            if (event === 'purchase') {
                layer.open({
                    content:'/equipment-purchase.html',
                    title: "选购服务",
                    area: ['40%', '85%'],
                    type:2,
                    end: function () {
                        layer.msg(window.message,{icon:6});
                        table.reload("my-equipment-table");
                    }
                })
            }
        });

        form.on('submit(search)', function (form) {
            table.reload('my-equipment-table', {
                where: form.field
            });
            return false;
        });

        var active = {
            reload: function () {
                var waiterName = $('#equipemntName');	//得到搜索框里已输入的数据
                //执行重载
                table.reload('visitor-equipment-table', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        equipmentName: equipmentName.val(),
                    }
                });
            }
        };

        $('.layui-inline .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });
</script>
</body>
</html>